<template>
        <div>
                <div class="top">
                        <p>饿了么</p>
                </div>
                <div class="top1">
                        <span v-for="(item,index) in list"
                              :key="index">{{item}}</span>
                </div>
                <div class="top2">
                        <div class="top3"
                             v-for="(item,index) in list1"
                             :key="index">
                                <div class="top4">
                                        <span>{{item.name}}</span>
                                        <span>{{item.span}}</span>
                                </div>
                                <div class="top5">
                                        <div class="top7">
                                                <img :src="item.pic"
                                                     alt="">
                                                <img :src="item.pic"
                                                     alt="">
                                        </div>
                                        <span>￥{{item.price}}</span>
                                </div>
                                <div class="top6">{{item.span1}}</div>
                        </div>
                </div>
        </div>
</template>

<script>
var pic = "https://img2.baidu.com/it/u=427337936,2386946828&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=320"
export default {
        data () {
                return {
                        list: ["全部", "待消费", "待评价", "退款"],
                        list1: [
                                { name: "纯手工水饺", span: "已送达", pic, price: "17.8", span1: "再来一单" },
                                { name: "唐久便利", span: "已送达", pic, price: "17.8", span1: "再来一单" },
                                { name: "美益水果", span: "已送达", pic, price: "17.8", span1: "再来一单" },
                        ]
                }
        }

}
</script>

<style lang="scss" scoped>
.top {
        width: 100%;
        height: 80px;
        background-color: #f5f5f5;
        text-align: center;
        line-height: 80px;
}
.top1 {
        width: 100%;
        height: 40px;
        background-color: #f5f5f5;

        > span {
                font-size: 18px;
                font-weight: bold;
                margin: 0 15px;
        }
}
.top2 {
        width: 100%;
        background-color: #f5f5f5;
        > .top3 {
                width: 95%;
                margin: auto;
                background-color: white;
                margin-top: 15px;
        }
}

.top4 {
        display: flex;
        justify-content: space-between;
        > span:nth-child(1) {
                font-size: 20px;
                font-weight: bold;
        }
        > span:nth-child(2) {
                font-size: 13px;
                // font-weight:bold;
                color: #777;
        }
}
.top5 {
        display: flex;
        justify-content: space-between;
        > .top7 {
                width: 60px;
                display: flex;

                > img {
                        width: 100%;
                        margin-right: 20px;
                }
                > span:nth-child(3) {
                        font-size: 15px;
                        // font-weight:bold;
                        // color: #777;
                        font-weight: bold;
                }
        }
}
.top6 {
        width: 80px;
        height: 30px;
        border: 1px solid aqua;
        border-radius: 20px;
        color: aqua;
        margin-left: 280px;
        text-align: center;
        line-height: 30px;
        font-weight: bold;
}
</style>